<template>
    <div id="forget-main">
        <!-- 找回密码界面 发送邮件 -->
        <div id="forget" v-if="show === 1">
            
            <el-form :model="user" :rules="rules" ref="user"  class="demo-ruleForm">
                <el-form-item  prop="email"  >
                    <el-input type="text" prefix-icon='el-icon-user-solid' 
                        v-model="user.email"  placeholder="注册邮箱" ></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button id="loginBtn"  style="width:100%" :loading="loading" 
                        type="primary" @click="sendResetPwd('user')">{{ loading ? '邮 件 发 送 中 ...' : '找 回 密 码' }}</el-button>
                </el-form-item> 
            </el-form>
            <span style="font-size:15px;font-weight:600;float:right">  
                <a href="/#/login"> 立即登录<i class="el-icon-location"></i> </a></span>

        </div>
        
        <!-- 发送邮件成功后，显示的消息 -->
        <div v-if="show === 2">
            <el-card class="box-card">
                <div id='card-up'>
                    <success id='card-success'></success>
                </div>
                <div id='card-down'>
                    <p style="font-size:22px">Hi , {{user.email}}</p>
                    <p>验证邮件发送成功。</p>
                    <p>请至邮箱查收验证邮件，进行邮箱确认操作。</p>
                </div>
            </el-card>
            <span style="font-size:15px;font-weight:600;float:right">  
                <a href="/#/login"> 立即登录<i class="el-icon-location"></i> </a></span>
        </div>

        
    </div>

</template>

<script>
import success from '../components/icons/success';

export default {
    components :{
        success
    },
    mounted() {
        
    },
    data() {
        return {
            user:{
              email:'',
            },
            rules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]
            },
            loading: false,
            show: 1

        }
    },
    methods: {
        /**
         * 发送重置密码邮件
         */
        sendResetPwd(userData) {
            this.$refs[userData].validateField('email',(valid) => {

                if(valid === "") {
                    this.loading = true;
                    // 校验通过
                    this.$api.get('/user/mail/send/reset/pwd/url',
                    {email:this.user.email})
                    .then(response => {
                        let result = response.data;
                        this.loading = false;
                        if(result.code === 200){
                            this.show = 2;
                            this.$notify.success({
                                title:'邮件发送成功',
                                message:result.message
                            })
                        } else {
                            this.$notify.error({
                            title:'邮件发送失败',
                            message:result.message
                        })
                        }
                    }).catch(err => {
                        this.loading = false;
                        this.$notify.error({
                            title:'邮件发送失败',
                            message:err.message
                        })
                    });
                    
                }
            }); 
        },
        resetPwd(resetData) {

        }
    }
    
}
</script>

<style scoped>
    #forget-main{
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;/*实现水平居中*/
        align-items:center; /*实现垂直居中*/
    }
    #forget{
        width: 30%;
    }
    #reset{
        width: 20%;
    }
    .box-card{
        width: 480px;
        height: 242px;
        /* line-height: 200px; */
    }
    p{
        text-align: center;
        color: green;
    }
    #card-success{
        width: 100px;
        height: 100px;
        
    }
    #card-up{
        margin: auto;
        width: 100px;
        height: 100px;
        
    } 
    #card-down{
        
        font-size: 16px;
        font-weight: 600;
    }
</style>